<!-- 全部分类 -->
<template>
	<view class="allcategories">
		<view class="classifyDetail_top">
			<view class="status_bar"></view>
			<!-- 返回 搜索 -->
			<view class="top">
				<view class="back" @click="back"><image src="https://community.chuangxiangdianli.com/images/classify/back .png" mode=""></image></view>
				<view class="serach"><input type="text" confirm-type="search" v-model="keywords" placeholder="羽绒服" @confirm="search" value="" /></view>
			</view>
			<!-- 分类标签页 -->
			<view class="tab">
				<view :class="classify.cate.index == 0 ? 'active' : ''" @click="changeCate(0, '')">全部商品</view>
				<view :class="classify.cate.index == index + 1 ? 'active' : ''" v-for="(item, index) in cateList" :key="index" @click="changeCate(index + 1, item.id)">{{ item.name }}</view>
			</view>
			<!-- 排序 -->
			<view class="sort">
				<view :class="classify.sort1.index == 0 ? 'active' : ''" @click="changeSort(0, '', '')">
					综合排序
				</view>
				<view :class="classify.sort1.index == 1 ? 'active' : ''" @click="changeSort(1, 'goods_sale', 'desc')">
					销量
					<view style="display: inline-block">
						<view class="jiantou" :class="classify.sort1.sort_order == 'asc' && classify.sort1.index == 1 ? 'active' : ''" style="transform: rotate(0deg)" ></view>
						<view class="jiantou" :class="classify.sort1.sort_order == 'desc' && classify.sort1.index == 1 ? 'active' : ''" ></view>
					</view>
				</view>
				<view :class="classify.sort1.index == 2 ? 'active' : ''" @click="changeSort(2, 'goods_price', 'desc')">
					价格
					<view style="display: inline-block">
						<view class="jiantou" :class="classify.sort1.sort_order == 'asc'  && classify.sort1.index == 2 ? 'active' : ''" style="transform: rotate(0deg)"></view>
						<view class="jiantou" :class="classify.sort1.sort_order == 'desc'  && classify.sort1.index == 2  ? 'active' : ''"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品数据 -->
		<view class="content">
			<Default
				:showflag="showflag"
				:type="4"
			></Default>
			<!-- <view class="goodsitem" v-if="goodsData.length > 0" v-for="(item, index) in goodsData" :key="item" @click='goDetail(item.id)'>
				<view class="goodsimg"><image :src="item.goods_master_image" mode=""></image></view>
				<view class="goodsinfo">
					<view class="title">
						<text>促销</text>
						<text>{{ item.goods_name }}</text>
					</view>
					<view class="discount">
						<text>满39减5</text>
						<text>金币抵￥8.1</text>
					</view>
					<view class="price">
						<text>￥{{ item.goods_price }}</text>
						<text>卖出{{ item.goods_sale }}单</text>
					</view>
				</view>
			</view> -->
			<waterfallFlow
				:leftData='leftData'
				:rightData='rightData'
			 />
		</view>
	</view>
</template>

<script>
	import waterfallFlow from '../../components/waterfallFlow/waterfallFlow.vue'
export default {
	components: {
		waterfallFlow
	},
	data() {
		return {
			showflag: false,
			id: '',
			keywords: '', // 搜索关键词
			cateList: [], // 商品分类
			classify: {
				cate: {
					index: 0,
					id: ''
				},
				sort1: {
					index: 0,
					str: '',
					sort_order: 'asc'
				}
			}, // 搜索条件数据
			goodsData: [], // 商品数据
			leftData: [], // 瀑布流左侧数据
			rightData: [], // 瀑布流右侧数据
		}
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id
			console.log('id', this.id)
		}
	},
	onShow() {
		//  获取分类
		this.getCateList()
		// 获取商品分类
		// this.getGoods()
	},
	watch: {
		keywords(newV, oldV) {
			if (newV) {
				this.getGoods()
			}
		}
	},
	methods: {
		//  跳转商品详情
		goDetail(id) {
			uni.navigateTo({
				url: '/other/goodsDetail/index?goods_id=' + id
			})
		},
		//  搜索框点击搜索
		search() {
			// console.log(this.keywords)
			// 先重置
			this.classify.cate.index = 0
			this.classify.cate.id = ''
			this.classify.sort1.index = 0
			this.classify.sort1.id = ''
			this.classify.sort1.sort_order = 'asc'
			this.getGoods()
		},
		// 更改排序
		changeSort(num, str, str1) {
				if (num == 0) {
					this.classify.sort1.str = ''
					this.classify.sort1.sort_order = ''
				} else {
					if (this.classify.sort1.sort_order == 'asc') {
						this.classify.sort1.sort_order = 'desc'
					} else {
						this.classify.sort1.sort_order = 'asc'
					}
					this.classify.sort1.str = str
				}
				this.classify.sort1.index = num
				
				this.getGoods()
			// }
		},
		//  改变分类
		changeCate(num, id) {
			console.log(num)
			if (this.classify.cate.index == num) {
				return
			} else {
				this.classify.cate.index = num
				this.classify.cate.id = id
				this.getGoods()
				
			}
		},
		// 获取商品数据
		getGoods() {
			var that = this
			var data = {}
			data.class_id = that.classify.cate.id
			data.keywords = that.keywords
			data.sort_type = that.classify.sort1.str
			data.sort_order = that.classify.sort1.sort_order
			console.log('打印提交参数', data)
			this.$mrequest({
				// url: 'Mini/store/StoreGoodsList',
				url: 'Mini/goods/goodsList',
				method: 'POST',
				data: data,
				callBack:function callBack (res) {
					console.log('店铺商品获取成功', res)
					if (res.status) {
						that.goodsData = res.data.data
						if (that.goodsData.length > 0) {
							that.showflag = false
							var left = []
							var leftHeight = 0
							var right = []
							var rightHeight = 1
							that.goodsData.map((item, index) => {
								if (leftHeight < rightHeight) {
									if (item.full_reductions.length > 0) {
										leftHeight += 260
									} else {
										leftHeight += 234
									}
									left.push(item)
								} else {
									if (item.full_reductions.length > 0) {
										rightHeight += 260
									} else {
										rightHeight += 234
									}
									right.push(item)
								}
							})
							that.leftData = left
							that.rightData = right
						} else {
							that.showflag = true
							that.leftData = []
							that.rightData = []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},
				fail: function fail (res) {
					console.log('店铺商品获取失败', res)
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		//  获取商品分类
		getCateList() {
			var that = this
			this.$mrequest({
				url: 'Mini/goods/goodsClass',
				method: "GET",
				data: {
					level: 1
				},
				callBack: function callBack (res) {
					if (res.status) {
						that.cateList = res.data
						if (that.id && that.cateList.length > 0) {
							that.cateList.map((item, index) => {
								if (that.id == item.id) {
									that.classify.cate.index = index + 1
									that.classify.cate.id = that.id
									console.log('that.classify', that.classify)
								}
							})
						}
						that.getGoods()
					}
				},
				fail: function fail (res) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		//  返回按钮
		back() {
			uni.navigateBack()
		},
	}
};
</script>

<style lang="scss">
page {
	background: #f7f6f9;
}
.allcategories {
	position: relative;
	.classifyDetail_top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #ffffff;
		z-index: 10;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10rpx;
		padding-top: calc(260rpx + var(--status-bar-height));
		box-sizing: border-box;
		margin-bottom: 40rpx;
		.goodsitem {
			width: 48%;
			height: 522rpx;
			margin: 10rpx 1%;
			display: inline-block;
			background: #fff;
			border-radius: 8rpx;
			.goodsimg {
				width: 100%;
				image {
					width:98%;
					height: 346rpx;
					margin-left: 1%;
				}
			}
			.goodsinfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				.title {
					width: 1005;
					height: 30rpx;
					margin-bottom: 16rpx;
					text:nth-child(1) {
						display: inline-block;
						width: 20%;
						line-height: 30rpx;
						background: #f55519;
						text-align: center;
						border-radius: 6rpx;
						margin-right: 10rpx;
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						color: #ffffff;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
					}
					text:nth-child(2) {
						width: 75%;
						display: inline-block;
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #2f2f2f;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
						line-height: 30rpx;
					}
				}
				.discount {
					width: 100%;
					height: 30rpx;
					margin-bottom: 20rpx;
					text {
						display: inline-block;
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #d53128;
						margin-right: 10rpx;
						padding: 4rpx 10rpx;
						background: url(https://community.chuangxiangdianli.com/images/store/goods_biao.png);
						background-size: 100% 100%;
					}
				}
				.price {
					width: 100%;
					height: 30rpx;
					text:nth-child(1) {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #f55519;
						margin-right: 10rpx;
					}
					text:nth-child(2) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
	}

	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}
	.top {
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		justify-content: flex-start;
		.back {
			image {
				width: 28rpx;
				height: 28rpx;
			}
			margin: 0 30rpx;
		}
		.serach {
			input {
				width: 423rpx;
				height: 59rpx;
				background: #f6f6f6;
				border-radius: 30px;
				padding-left: 30rpx;
			}
		}
	}
	.tab {
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		overflow-x: auto;
		view {
			width: 100rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #2c2c2c;
			margin: 0 30rpx;
			white-space: nowrap;
		}
		.active {
			color: #34c39e;
		}
	}
	.sort {
		width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		padding: 0 36rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			// width: 30%;
			flex: 1;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50rpx;
			color: #000;
			box-sizing: border-box;
			text-align: center;
			.jiantou{
				display: block;
				width: 0;
				height: 0;
				border-color: transparent transparent #333333 transparent;  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
				border-style: solid;
				border-width: 0 10rpx 10rpx 10rpx;
				transform: rotate(180deg);
				margin-left: 10rpx;
				margin-top: 5rpx;
			}
			.active{
				border-color: transparent transparent #f55519 transparent;
			}
		}

		.active {
			color: #f55519;
		}
	}
}
</style>
